<script setup lang="ts">
import { ref } from 'vue'

interface DiaryEntry {
  id: number
  content: string
  date: string
  mood: 'happy' | 'normal' | 'sad'
  weather: string
  tags: string[]
}

const diaryEntries = ref<DiaryEntry[]>([
  {
    id: 1,
    content: '今天学习了Vue3的新特性，感觉收获很多。准备写一篇博客分享学习心得...',
    date: '2024-02-07',
    mood: 'happy',
    weather: '晴',
    tags: ['学习', '编程', 'Vue3']
  },
  {
    id: 2,
    content: '完成了项目的一个重要功能，虽然遇到了一些问题，但最终都解决了...',
    date: '2024-02-06',
    mood: 'normal',
    weather: '多云',
    tags: ['工作', '项目']
  },
  {
    id: 3,
    content: '今天遇到了一个难题，花了很多时间也没解决，心情有点低落...',
    date: '2024-02-05',
    mood: 'sad',
    weather: '雨',
    tags: ['工作', '困难']
  }
])

const getMoodIcon = (mood: string) => {
  switch (mood) {
    case 'happy':
      return 'fa fa-smile-o'
    case 'normal':
      return 'fa fa-meh-o'
    case 'sad':
      return 'fa fa-frown-o'
    default:
      return 'fa fa-meh-o'
  }
}

const getMoodColor = (mood: string) => {
  switch (mood) {
    case 'happy':
      return '#52c41a'
    case 'normal':
      return '#1890ff'
    case 'sad':
      return '#ff4d4f'
    default:
      return '#1890ff'
  }
}

const handleEdit = (entry: DiaryEntry) => {
  // 实现编辑功能
  console.log('编辑日记:', entry)
}

const handleDelete = (entry: DiaryEntry) => {
  // 实现删除功能
  console.log('删除日记:', entry)
}
</script>

<template>
  <div class="diary-container">
    <div class="header">
      <h2>我的日记</h2>
      <el-button type="primary">
        <i class="fa fa-plus"></i>
        写日记
      </el-button>
    </div>

    <div class="diary-list">
      <div v-for="entry in diaryEntries" :key="entry.id" class="diary-card">
        <div class="diary-header">
          <div class="diary-date">
            <i class="fa fa-calendar"></i>
            {{ entry.date }}
          </div>
          <div class="diary-info">
            <span class="mood">
              <i :class="getMoodIcon(entry.mood)" :style="{ color: getMoodColor(entry.mood) }"></i>
            </span>
            <span class="weather">
              <i class="fa fa-cloud"></i>
              {{ entry.weather }}
            </span>
          </div>
        </div>

        <div class="diary-content">
          {{ entry.content }}
        </div>

        <div class="diary-footer">
          <div class="tags">
            <el-tag
              v-for="tag in entry.tags"
              :key="tag"
              size="small"
              class="tag"
            >
              {{ tag }}
            </el-tag>
          </div>
          <div class="actions">
            <el-button type="primary" size="small" @click="handleEdit(entry)">
              <i class="fa fa-edit"></i>
              编辑
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(entry)">
              <i class="fa fa-trash"></i>
              删除
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.diary-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.diary-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.diary-card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.diary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.diary-date {
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.diary-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mood, .weather {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 14px;
}

.diary-content {
  color: #333;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.diary-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  margin-right: 8px;
}

.actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 768px) {
  .diary-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .diary-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style> 